<template>
	<view class="changeinfocontent">
		<view class="img-box">
			<view class="edit-img">
				<image class="img" v-if="!author_img" src="../static/img/author.jpg" mode=""></image>
				<image class="img" v-if="author_img" :src="author_img" mode=""></image>
				<view class="mask" @click="chooseImg" v-if="!author_img">
					<icon class="iconfont icon-xiangji editicon"></icon>
				</view>
			</view>
			<view class="edit-text" @click="chooseImg">点击修改图像</view>
		</view>
		<view class="info-box">
			<ul class="text-box">
				<navigator open-type="redirect" url="/pagesA/modify/modify?title=昵称" class="info-item">
					<text class="left">昵称</text>
					<text class="right">{{user.userName}}</text>
					<text class="infoicon iconfont icon-qianjin"></text>
				</navigator>
				<view class="info-item">
					<text class="left">抖音号</text>
					<text class="right">{{user.userId}}</text>
				</view>
				<navigator open-type="redirect" url="/pagesA/modify/modify?title=简介" class="info-item">
					<text class="left">简介</text>
					<text class="right">{{user.introduce||''}}</text>
					<text class="infoicon iconfont icon-qianjin"></text>
				</navigator>
				<picker mode="selector" :range="school" id="school" @change="bindChange">
					<view class="info-item">
						<text class="left">学校</text>
						<text class="right">{{user.school||''}}</text>
						<text class="infoicon iconfont icon-qianjin"></text>
					</view>
				</picker>
				<picker mode="selector" :range="sex" id="sex" @change="bindChange">
					<view class="info-item">
						<text class="left">性别</text>
						<text class="right" v-if="!user.sex">点击选择性别</text>
						<text class="right" v-if="user.sex">{{user.sex}}</text>
						<text class="infoicon iconfont icon-qianjin"></text>
					</view>
				</picker>
				<picker mode="date" :value="user.birthday" id="birthday" @change="bindChange">
					<view class="info-item">
						<text class="left">生日</text>
						<text class="right">{{user.birthday||''}}</text>
						<text class="infoicon iconfont icon-qianjin"></text>
					</view>
				</picker>
				<picker mode="selector" :range="city" :value="user.region" id="city" @change="bindChange">
					<view class="info-item">
						<text class="left">地区</text>
						<text class="right">{{user.city}}</text>
						<text class="infoicon iconfont icon-qianjin"></text>
					</view>
				</picker>
			</ul>
		</view>
	</view>
</template>

<script>
	import t from '../common/helper.js';

	export default {
		name: "ChangeInfoContent",
		data() {
			return {
				author_img: '',
				video: '',
				user: {
					userName: '',
					userId: '',
					introduce: '',
					birthday: '',
					school: '北京大学',
					sex: '',
					city: '',
				},
				school: ['清华大学', '北京大学', "复旦大学", '南京大学'],
				sex: ['男', '女'],
				city: []
			};
		},
		methods: {
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sourceType: 'album',
					success: res => {
						this.author_img = res.tempFilePaths[0];
						const tempFilePaths = res.tempFilePaths;
						const suffix = tempFilePaths[0].split('.');
						const name = this.user.userId + '.' + suffix[suffix.length - 1];
						uni.uploadFile({
							url: `${t.o}/upload`, 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'name': name,
								'type': 'img',
								'userId': this.user.userId,
							},
							success: (uploadFileRes) => {
								this.user.avatar = this.author_img;
								uni.setStorageSync('user', [this.user]);
								getApp().$uploadimg = true
							}
						});
					}
				})
			},
			chooseVideo() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: res => {
						this.video = res.tempFilePaths;
						const tempFilePath = res.tempFilePath;
						uni.uploadFile({
							url: t.o + '/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePath,
							name: 'file',
							formData: {
								'name': '视频.mp4',
								'type': 'video',
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
					}
				})
			},

			getCityList() {
				uni.request({
					url: t.o + '/json/city.json',
					success: res => {
						let arr = []
						res.data.city.forEach(item => {
							item.list.forEach(deepitem => {
								arr.push(deepitem.name);
							})
						})
						this.city = arr;
					}
				})
			},
			getUserInfo() {
				const data = uni.getStorageSync('user')[0];
				this.user.userName = data.userName;
				this.user.birthday = data.birthday;
				this.user.city = data.city;
				this.user.userId = data.userId;
				this.user.introduce = data.introduce;
				this.user.sex = data.sex;
				this.user.school = data.school;
			},
			bindChange(e) {
				const columnName = e.target.id;
				let data = '';
				if (columnName == 'birthday') {
					data = e.detail.value;
				} else {
					data = this[columnName][e.detail.value]
				}
				uni.request({
					url: `${t.o}/userchange`,
					method: 'POST',
					data: {
						userId: this.user.userId,
						columnName,
						data,
					},
					success: res => {
						this.user[columnName] = data;
						uni.setStorageSync('user', [this.user]);
					}
				})
			},
		},
		mounted() {
			this.getCityList();
		}
	}
</script>

<style lang="scss">
	.changeinfocontent {
		color: #FFFFFF;

		.img-box {
			margin: 40px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.edit-img {
				margin: 10px 0;
				border-radius: 50%;
				width: 100px;
				height: 100px;
				position: relative;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.mask {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					background-color: rgba(0, 0, 0, .4);

					.editicon {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						font-size: 35px;
					}
				}
			}

			.edit-text {
				margin-top: 10px;
				color: #656565;
			}
		}

		.info-box {
			padding: 0 20px;

			.text-box {
				.info-item {
					height: 60px;
					line-height: 60px;
					position: relative;
					display: flex;
					justify-content: space-between;

					.right {
						margin-right: 25px;
						color: #888888;
					}

					.infoicon {
						position: absolute;
						right: 0;
						font-size: 14px;
						color: #888888;
					}
				}
			}
		}
	}
</style>
